<script setup lang="ts">

</script>

<template>
  <div class="handicap">

    <div class="head">
      <h2 class="title slim-scroller">000001 上证综指</h2>
    </div>
    <div class="body">
      <!-- 股票委比、委差 -->
      <div  v-if=false  class="item-group">
        <el-row class="item">
          <el-col :span="6">委比</el-col>
          <el-col :span="6" v-quote-color="19.59">0%</el-col>
          <el-col :span="6">委差</el-col>
          <el-col :span="6" v-quote-color="211">0</el-col>
        </el-row>
      </div>

      <!-- 卖五档 -->
      <div  v-if=false  class="item-group">
        <el-row class="item">
          <el-col :span="8">卖五</el-col>
          <el-col :span="8" v-quote-color="11.76">0.0</el-col>
          <el-col :span="8">0</el-col>
        </el-row>
        <el-row class="item">
          <el-col :span="8">卖四</el-col>
          <el-col :span="8" v-quote-color="11.76">0.0</el-col>
          <el-col :span="8">0</el-col>
        </el-row>
        <el-row class="item">
          <el-col :span="8">卖三</el-col>
          <el-col :span="8" v-quote-color="11.76">0.0</el-col>
          <el-col :span="8">0</el-col>
        </el-row>
        <el-row class="item">
          <el-col :span="8">卖二</el-col>
          <el-col :span="8" v-quote-color="11.76">0.0</el-col>
          <el-col :span="8">0</el-col>
        </el-row>
        <el-row class="item">
          <el-col :span="8">卖一</el-col>
          <el-col :span="8" v-quote-color="11.76">0.0</el-col>
          <el-col :span="8">0</el-col>
        </el-row>
      </div>

      <!-- 买五档 -->
      <div  v-if=false  class="item-group">
        <el-row class="item">
          <el-col :span="8">买五</el-col>
          <el-col :span="8" v-quote-color="11.76">0.0</el-col>
          <el-col :span="8">0</el-col>
        </el-row>
        <el-row class="item">
          <el-col :span="8">买四</el-col>
          <el-col :span="8" v-quote-color="11.76">0.0</el-col>
          <el-col :span="8">0</el-col>
        </el-row>
        <el-row class="item">
          <el-col :span="8">买三</el-col>
          <el-col :span="8" v-quote-color="11.76">0.0</el-col>
          <el-col :span="8">0</el-col>
        </el-row>
        <el-row class="item">
          <el-col :span="8">买二</el-col>
          <el-col :span="8" v-quote-color="11.76">0.0</el-col>
          <el-col :span="8">0</el-col>
        </el-row>
        <el-row class="item">
          <el-col :span="8">买一</el-col>
          <el-col :span="8" v-quote-color="11.76">0.0</el-col>
          <el-col :span="8">0</el-col>
        </el-row>
      </div>

      <!-- 通用指标 -->
      <div class="item-group">
        <el-row class="item">
          <el-col :span="6">现价</el-col>
          <el-col :span="6" v-quote-color="11.71">0.0</el-col>
          <el-col :span="6">今开</el-col>
          <el-col :span="6" v-quote-color="11.77">0.0</el-col>
        </el-row>
        <el-row class="item">
          <el-col :span="6">涨跌</el-col>
          <el-col :span="6" v-quote-color="-0.15">0.0</el-col>
          <el-col :span="6">最高</el-col>
          <el-col :span="6" v-quote-color="11.78">0.0</el-col>
        </el-row>
        <el-row class="item">
          <el-col :span="6">涨幅</el-col>
          <el-col :span="6" v-quote-color="-1.26">0.0%</el-col>
          <el-col :span="6">最低</el-col>
          <el-col :span="6" v-quote-color="11.69">0.0</el-col>
        </el-row>
        <el-row class="item">
          <el-col :span="6">总手</el-col>
          <el-col :span="6">0%</el-col>
          <el-col :span="6">总额</el-col>
          <el-col :span="6">0</el-col>
        </el-row>
        <!-- 指数/股票 -->
        <el-row class="item">
          <el-col :span="6">昨收</el-col>
          <el-col :span="6">0.0</el-col>
        </el-row>
      </div>

      <!-- 股票 -->
      <div v-if=false class="item-group">
        <el-row class="item">
          <el-col :span="6">换手</el-col>
          <el-col :span="6">0.0%</el-col>
          <el-col :span="6">股本</el-col>
          <el-col :span="6">0</el-col>
        </el-row>
        <el-row class="item">
          <el-col :span="6">净值</el-col>
          <el-col :span="6">0.0</el-col>
          <el-col :span="6">流通</el-col>
          <el-col :span="6">0</el-col>
        </el-row>
        <el-row class="item">
          <el-col :span="6">收益</el-col>
          <el-col :span="6">0.0</el-col>
          <el-col :span="6">PE（动）</el-col>
          <el-col :span="6">0.0</el-col>
        </el-row>
        <el-row class="item">
          <el-col :span="6">量比</el-col>
          <el-col :span="6">0.65</el-col>
        </el-row>
      </div>

         <!-- 期货 -->
      <div v-if=false class="item-group">
        <el-row class="item">
          <el-col :span="6">结算</el-col>
          <el-col :span="6">0.0</el-col>
          <el-col :span="6">昨结</el-col>
          <el-col :span="6">0.0</el-col>
        </el-row>
        <el-row class="item">
          <el-col :span="6">振幅</el-col>
          <el-col :span="6">0.89%</el-col>
          <el-col :span="6">均价</el-col>
          <el-col :span="6">0.0</el-col>
        </el-row>
        <el-row class="item">
          <el-col :span="6">持仓</el-col>
          <el-col :span="6">0</el-col>
          <el-col :span="6">仓差</el-col>
          <el-col :span="6">0</el-col>
        </el-row>
        <el-row class="item">
          <el-col :span="6">涨停</el-col>
          <el-col :span="6">0.0</el-col>
          <el-col :span="6">跌停</el-col>
          <el-col :span="6">0.0</el-col>
        </el-row>
      </div>


      <!-- 指数统计 -->
      <div class="item-group">
        <el-row class="item">
          <el-col :span="12">涨停</el-col>
          <el-col :span="12">0</el-col>
        </el-row>
        <el-row class="item">
          <el-col :span="12">涨幅 &gt;7%</el-col>
          <el-col :span="12">0</el-col>
        </el-row>
        <el-row class="item">
          <el-col :span="12">涨幅 5-7%</el-col>
          <el-col :span="12">0</el-col>
        </el-row>
        <el-row class="item">
          <el-col :span="12">涨幅 3-5%</el-col>
          <el-col :span="12">0</el-col>
        </el-row>
        <el-row class="item">
          <el-col :span="12">涨幅 0-3%</el-col>
          <el-col :span="12">0</el-col>
        </el-row>
      </div>
      <div class="item-group">
        <el-row class="item">
          <el-col :span="12">跌幅 0-3%</el-col>
          <el-col :span="12">0</el-col>
        </el-row>
        <el-row class="item">
          <el-col :span="12">跌幅 3-5%</el-col>
          <el-col :span="12">0</el-col>
        </el-row>
        <el-row class="item">
          <el-col :span="12">跌幅 5-7%</el-col>
          <el-col :span="12">0</el-col>
        </el-row>
        <el-row class="item">
          <el-col :span="12">跌幅 &gt;7%</el-col>
          <el-col :span="12">0</el-col>
        </el-row>
        <el-row class="item">
          <el-col :span="12">跌停</el-col>
          <el-col :span="12">0</el-col>
        </el-row>
      </div>

    </div>
  </div>
</template>


<style scoped lang="scss">
.handicap {

  background-color: #f8faff;
  color: #515a6e;

  .head {
    text-align: center;
    background-color: #edf3ff;
    height: 48px;
    line-height: 48px;
    border-bottom: 1px solid #efefef;
    padding: 0 15px;

    .title {
      overflow: auto;
      max-width: 100%;
      white-space: nowrap;
      font-size: 18px;
    }
  }

  .body {
    font-size: 12px;

    .item-group {
      padding: 5px 0;
      border-top: 2px solid #fff;

      .item {
        margin: 4px 0;

        .el-col {
          text-align: center;
        }
      }
    }

    .item-group.trade {
      height: 115px;
      overflow: auto;
    }
  }
}
</style>